<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="pwd"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
</van-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      /*
      token  accessToken authorityToken
      userName
      avatar
      */
      const userInfo = {
        userName: 'conner',
        avatar: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3262544826,1690254880&fm=26&gp=0.jpg'
      }
      const accessToken = '8feifhe93893jd4'
      // 后端验证成功后 要将 用户信息 以及 accessToken 缓存起来
      localStorage.setItem('userInfo', JSON.stringify(userInfo))
      localStorage.setItem('accessToken', accessToken)
      // 如果是 因为 没有登录权限，访问某个需要登录的页面，重定向到登录页（query中传递一个参数为path=目标页)
      if (this.$route.query.path) {
        this.$router.push(this.$route.query.path)
      } else {
        this.$router.push('/home')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
